<template>
  <el-aside width="200px" style="height: 100%">
    <el-menu
      style="height: 100%; box-shadow: 10px 0px 10px -5px rgba(0, 0, 0, 0.3)"
      :default-active="activeIndex"
      class="el-menu-vertical-demo"
      @select="handleSelect"
      background-color="#fff"
      text-color="#000"
      active-text-color="#304dc3"
      router
    >
      <el-menu-item index="/">
        <i class="el-icon-user"></i>
        <span>学生信息</span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/", // 默认激活的菜单项
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      // 你可以在这里处理菜单项选中的逻辑
    },
  },
};
</script>

<style>
/* .el-aside {
  background-color: #545c64;
  color: #fff;
  text-align: center;
  line-height: 200px;
} */

.el-menu {
  border-right: 1px solid #000;
}
</style>
